<template>
<div style="width: 500px;height: 621px">
  <el-form label-width="80px" size="small">
    <el-upload
        style="text-align: center;padding-bottom: 5px"
        class="avatar-uploader"
        :action="'http://'+serverIp+`:9090/file/upload`"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
      <img v-if="form.avatarUrl" :src="form.avatarUrl" alt="头像加载失败" title="点击更改头像" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-form-item label="用户名" >
      <el-input v-model="form.username" disabled autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" >
      <el-input  v-model="form.realName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" >
      <el-input  v-model="form.identity" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" >
      <el-select v-model="form.sex" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学校" >
      <el-input v-model="form.college" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="专业" >
      <el-input v-model="form.major" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" >
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" >
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item>
<!--      <el-button @click="cancel">取 消</el-button>-->
      <el-button type="primary" @click="save">保 存</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import {serverIp} from "../../public/config";

export default {
  name: "Person",
  data(){
    return{
      serverIp: serverIp,
      form:{},
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
    }
  },
  created() {
    this.getUser().then(res=>{
      this.form=res
    })
  },
  methods:{
    async getUser(){
      return (await this.request.get("/user/username/"+this.user.username)).data
    },
    save(){ //新增或修改
      this.request.post("/user",this.form).then(res =>{
        if(res.code==='200'){
          this.$message.success("保存成功")

          //触发父级更新 User 方法  针对更改用户昵称后头部的显示
          this.$emit("refreshUser")
          //更新浏览器存储的用户信息
          this.getUser().then(res=>{
            res.token=JSON.parse(localStorage.getItem("user")).token;
            localStorage.setItem("user",JSON.stringify(res))
          })

        }else{
          this.$message.error("保存失败")
        }
      })

    },
    handleAvatarSuccess(res){
      this.form.avatarUrl=res;
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>